<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :inline="true" class="demo-form-inline" :disabled="disabled">
          <el-form-item label="一级分类">
            <el-select placeholder="请选择" v-model="(category1Id as number)" @change="getCategory1">
              <el-option v-for="item in categoryList1" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类">
            <el-select placeholder="请选择"  v-model="(category2Id as number)" @change="getCategory2">
              <el-option v-for="item in categoryList2" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="三级分类">
            <el-select placeholder="请选择" v-model="(category3Id as number)">
              <el-option v-for="item in categoryList3" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </template>
    
    <script lang="ts">
    import { defineComponent } from "vue";
    
    export default defineComponent({
      name: "Attr",
    });
    </script>
    
    <script setup lang="ts">
      import { onMounted } from "vue";
      import { storeToRefs } from "pinia";
      //引入attr的仓库
      import useAttrStore from "@/stores/attr";

      defineProps<{disabled:boolean}>()
      //获取attr仓库实例对象
      const attrStore = useAttrStore();
      //接受attr仓库中的state数据
      const { categoryList1, category1Id ,categoryList2, category2Id ,categoryList3 , category3Id} = storeToRefs(attrStore);

      //初始化调用getCategoryList1
      onMounted(() => {
        //调用store中1级分类请求
        attrStore.getCategoryList1();
        
      });
      //调用store中2级分类请求
      const getCategory1 = () => {
        //重新选择先清空2 3级列表
        categoryList2.value = [];
        category2Id.value = null;
        categoryList3.value=[];
        category3Id.value =null;
        attrStore.getCategoryList2();

      }
      //调用store中3级分类请求
      const getCategory2 = () => {
        //重新选择先清空3级列表
        categoryList3.value=[];
        category3Id.value =null;
        attrStore.getCategoryList3()
      }
    </script>
    